<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<!-- used from test_RemotePane.html -->
<html>
<head>

<title>Dojo Button Widget Test</title>

<script type="text/javascript">
	
	var djC = "djConfig"; // this isnt allowed! becomes var djC = "";
	var djConfig = {isDebug: true,  debugAtAllCosts: true };
	djConfig.debugAtAllCosts = true; var a=0;var b=0;var c=0;
	if (a<b || b>c){	
		aksd = 65/87;
	}
</script>

<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.event.*");
	dojo.require("dojo.widget.Button");
	dojo.require("dojo.widget.html.Button");
	dojo.require("dojo.widget.Menu2");
	dojo.require("dojo.fx.html");
	
	dojo.hostenv.writeIncludes();
</script>

<script>
	// Load user custom button
	
	// 1. set directory for acme package (which contains widgets)
	// The path is relative to the dojo/ directory, so typically
	// it's something like "../acme"
	dojo.setModulePrefix('acme', 'tests/widget/acme');
	dojo.widget.manager.registerWidgetPackage('acme');
	
	
	// 2. load the user defined button
	dojo.require("acme.DogButton");
</script>

<style>
	/* group multiple buttons in a row */
	.box {
		display: block;
		text-align: center;
	}
	.box .dojoButton {
		float: left;
		margin-right: 10px;
	}
	
</style>
</head>
<body>

<h2>User defined button</h2>
<p>Dojo users can extend the button class and define their own background images.
Here's an example:</p>
<style>
  .dc {
  	font-size: x-large;
  	padding-top: 10px;
  	padding-bottom: 10px;
  }
</style>
<div class="box">
	<button dojoType="dogbutton" onclick='dojo.debug("short");'>
		<div class="dc">short</div>
	</button>
	<button dojoType="dogbutton" onclick='dojo.debug("longer");'>
		<div class="dc">bit longer</div>
	</button>
	<button dojoType="dogbutton" onclick='dojo.debug("longer yet");'>
		<div class="dc">ridiculously long</div>
	</button>
	<div style="clear: both;"></div>
</div>
</body>
</html>